<template>
  <view>
    <view class="slider-box">
      <view class="flex"></view>
      <movable-area class="sliderBar" :style="{ width: 100 - (minScore as number) + '%' }">
        <view class="gone" :style="{ width: x + 'px' }"></view>
        <movable-view class="slider" :x="x" :y="y" direction="all" @change="onChange">
          <text>{{ score }}</text>
        </movable-view>
      </movable-area>
    </view>
  </view>
</template>

<script lang="ts" setup>
const props = defineProps<{
  min: number
  max: number
}>()
const emit = defineEmits<{
  (e: 'change', score: number): void
}>()

const slideBarWidth = ref(0)
const minScore = ref(props.min)
const maxScore = ref(props.max)
const x = ref(0)
const y = ref(0)
let score = ref(props.min)

let instance: any
onMounted(() => {
  instance = getCurrentInstance()
})

function nextTickBarWidth(scorenum: number) {
  nextTick(() => {
    uni
      .createSelectorQuery()
      .in(instance)
      .select('.slider-box')
      .boundingClientRect((res: any) => {
        slideBarWidth.value = res.width as number
        inItValue(scorenum)
      })
      .exec()
  })
}
defineExpose({
  nextTickBarWidth,
})

function onChange(e: any) {
  x.value = e.detail.x as number
  let string: string | number = (x.value / slideBarWidth.value) * maxScore.value
  string = string.toString()
  score.value = parseInt(string) + parseInt(minScore.value.toString())
  emit('change', score.value)
}
function inItValue(scorenum: number) {
  let string: string | number = scorenum - minScore.value
  x.value = (string / maxScore.value) * slideBarWidth.value
  score.value = scorenum
}
</script>

<style lang="scss">
$uni-color-primary: #408df2;
.slider-box {
  display: flex;
  width: 100%;
  height: 32rpx;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    height: 8rpx;
    border-radius: 8rpx;
    background-color: #eeeeee;
    top: calc(50% - 2px);
    left: 0;
    transform: translateY(-50%);
    width: 100%;
  }
  .flex {
    flex: 1;
    height: 8rpx;
    border-radius: 8rpx 0 0 8rpx;
    background-color: $uni-color-primary;
    margin-top: 12rpx;
    position: relative;
    z-index: 1;
  }

  .sliderBar {
    height: 100%;
    border-radius: 8rpx;
    width: 100%;
    .gone {
      background: #408df2;
      height: 100%;
      position: absolute;
      left: 0;
      height: 8rpx;
      top: 12rpx;
      max-width: 100%;
      z-index: 1;
      border-radius: 0 8rpx 8rpx 0;
    }
    .slider {
      width: 0;
      height: 100%;
      position: relative;
      z-index: 2;
      &::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        background-color: #fff;
        border: 2px solid $uni-color-primary;
        width: 32rpx;
        top: -2px;
        height: 100%;
        transform: translatex(calc(-50% + 2px));
      }
      text {
        position: absolute;
        top: calc(100% + 2px);
        left: 0;
        transform: translateX(-50%);
        color: var(--primary-blue-medium, #408df2);
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.5px;
      }
    }
  }
}
</style>
